<template>
  <Compact class="mb-2">
    <InputNumber class="!w-52" v-model:value="data.num">
      <template #prefix>
        <span>总楼层</span>
      </template>
    </InputNumber>
    <InputNumber class="!w-52" v-model:value="data.floorHeight">
      <template #prefix>
        <span>层高</span>
      </template></InputNumber
    >
    <Button @click="onGenerate">生成楼层列表</Button>
    <Button @click="onClean">清除</Button>
  </Compact>

  <Table
    :columns="columns"
    :data-source="dataSource"
    :pagination="false"
  ></Table>
</template>

<script setup lang="tsx">
import { computed, reactive, ref, watchEffect } from 'vue';
import {
  Button,
  Compact,
  InputNumber,
  Space,
  Table,
  TableProps,
} from 'ant-design-vue';

interface Item {
  floor: number;
  floorHeight: number;
  isEdit: boolean;
}

const modal = defineModel<Array<Omit<Item, 'isEdit'>>>('value', {
  default: [],
});

const data = reactive<{ num: number; floorHeight: number }>({
  num: undefined,
  floorHeight: undefined,
});

const dataSource = ref<Item[]>(
  modal.value?.map((item) => {
    const { floor, floorHeight } = item;
    return {
      floor,
      floorHeight,
      isEdit: false,
    };
  }) || [],
);

watchEffect(() => {
  modal.value = dataSource.value.map((item) => {
    const { floor, floorHeight } = item;
    return {
      floor,
      floorHeight,
    };
  });
});

const onGenerate = () => {
  dataSource.value = Array.from({ length: data.num }, (_, index) => {
    return {
      floor: index + 1,
      floorHeight: data.floorHeight,
      isEdit: false,
    };
  });
};
const onClean = () => {
  dataSource.value = [];
};

const columns = computed<TableProps['columns']>(() => {
  return [
    {
      title: '楼层',
      dataIndex: 'floor',
      customRender({ record }) {
        return (
          <InputNumber v-model:value={record.floor} disabled={!record.isEdit} />
        );
      },
    },
    {
      title: '层高',
      dataIndex: 'floorHeight',
      customRender({ record }) {
        return (
          <InputNumber
            v-model:value={record.floorHeight}
            disabled={!record.isEdit}
          />
        );
      },
    },
    {
      title: '操作',
      customRender({ index, record }) {
        return (
          <Space>
            <Button
              type='link'
              disabled={!record.isEdit}
              onClick={() =>
                dataSource.value.splice(index, 0, {
                  floor: undefined,
                  floorHeight: undefined,
                  isEdit: false,
                })
              }
            >
              上方添加
            </Button>
            <Button
              type='link'
              disabled={!record.isEdit}
              onClick={() =>
                dataSource.value.splice(index + 1, 0, {
                  floor: undefined,
                  floorHeight: undefined,
                  isEdit: false,
                })
              }
            >
              下方添加
            </Button>
            <Button
              type='link'
              onClick={() => (record.isEdit = !record.isEdit)}
            >
              {record.isEdit ? '确认' : '编辑'}
            </Button>
          </Space>
        );
      },
    },
  ];
});
</script>
